<template>
    <el-select v-bind="$attrs">
        <el-option v-for="op in options_c" :key="op[valueCol]" :label="op[labelCol]" :value="op[valueCol]">
            <slot name="option" :option="op">
                {{op[labelCol]}}
            </slot>
        </el-option>
    </el-select>
</template>

<script lang="ts">
import {computed} from "vue";

export default {
    name: "MiSelect",
    props:{
        options:Object,
        labelCol:{type:String, default:'title'},
        valueCol:{type:String, default:'id'}
    },
    setup(props:any, context:any){

        const {labelCol, valueCol} = props

        // 根据modelValue的类型，重新结算options中id的类型
        const options_c = computed(()=>{
            const { options } = props
            if(typeof context.attrs.modelValue == 'number'){
                // 将 options中的id强制转为number
                for(let i in options){
                    options[i][valueCol] = Number(options[i][valueCol])
                }
            }else if(typeof context.attrs.modelValue == 'string'){
                // 强制转为string
                for(let i in options){
                    options[i][valueCol] = String(options[i][valueCol])
                }
            }
            return options
        })

        return {
            options_c
        }

    }
}
</script>

<style scoped>

</style>
